<template>
<div>
    <Header txt="结算中心"></Header>
    <div class="Stmain">
        <div class="Sttop">
            <p class="St2mb">
                李四
                <span class="St2ml">15012340708</span>
            </p>
            <p class="St2hzi">河南省新乡市红旗区南干道与新中大道交叉口B座10楼102室；邮编453000</p>
            <div class="St2yuan">
                <p>修改地址</p>
            </div>
        </div>
    </div>
    <!-- 配送方式 -->
    <ul class="Smainco Stmtop">
        <li class="Smainto">
            <div>
                本单请支付
            </div>
            <div class="Smco">
                ￥392.12
            </div>
        </li>
    </ul>
    <!-- 商品 -->
    <ul class="Smainco2">
        <li class="Sm">
            <span>
                使用第三方支付平台：
            </span>
        </li>
        <li v-for="(item,index) in zhi" :key="index">
            <div v-if="index==0" class="Sleft">
                <img class="Smaincon" :src="item.src" alt="">
            <div class="Smaincone">
                <p class="Smaintop">
                    {{item.name}}
                </p>
            </div>
            <i class="Sma" @click="changei(index)" :class="{'Sma1':!flages[index]}"></i>
            </div>
        </li>
        <li v-for="(item,index) in zhi" :key="index">
            <div v-if="index>0" class="Sleft" v-show="flage">
                <img class="Smaincon" :src="item.src" alt="">
            <div class="Smaincone">
                <p class="Smaintop">
                    {{item.name}}
                </p>
            </div>
            <i class="Sma" @click="changei(index)" :class="{'Sma1':!flages[index]}"></i>
            </div>
        </li>
        <li v-if="!flage" class="Smain1" @click="changemore()">
            <div class="Smainbo">
                <p>
                    显示全部支付方式
                    <i class="Stxia"></i>
                </p>
            </div>
        </li>
        <li v-if="flage" class="Smain1" @click="changemore()">
            <div class="Smainbo">
                <p>
                    收起
                    <i class="Stshang"></i>
                </p>
            </div>
        </li>
    </ul>
    <button class="Scbut">确认支付</button>
</div>
</template>

<script>
import Header from '../ma/Header';
export default {
    name:'Scenter',
    data(){
        return{
            info:'结算中心',
            flage:false,
            flages:[],
            zhi:this.$store.state.zhifu
        }
    },
    components:{
        'Header':Header
    },
    methods:{
        changei(j){
            this.flages = [];
            for (let i = 0; i < this.zhi.length; i++) {
                this.flages[i] = false; 
            }
            this.flages[j] = !this.flages[j]; 
            console.log(this.flages);
        },
        // 显示更多
        changemore(){
            this.flage = !this.flage;
        },
    }
}
</script>

<style scoped>
/* 内容 */
  .Stmain {
      margin-top: 10rem;
      background: #fff;
      padding-top: 1rem;
      border-bottom: 1px solid #ccc;
  }
  /* 添加收获地址 */
  .Sttop {
      /* height: 10rem; */
      font-size: 2.8rem;
      text-align: left;
      margin: 0 2rem;
      position: relative;
  }
  .St2hzi {
       color: #808080;
       width: 70%;
       padding-bottom: 3rem;
  }
  .St2yuan {
      text-align: right;
      position: absolute;
      top: 3.9rem;
      right: 2rem;
      font-size: 2.4rem;
      color: #959595;
      width: 7rem;
      height: 7rem;
      border: 0.1rem solid #959595;
      border-radius: 50%;
      text-align: center;
      padding: 1rem;
  }
  .St2mb {
      margin: 1rem 0 3.4rem 0;
  }
  .St2ml {
      margin-left: 6rem;
  }
  /* 商品 */
  .Smainco2 {
    text-align: left;
    font-size: 2.8rem;
    /* border-top: 1px solid #cccccc; */
    /* border-bottom: 1px solid #ccc;  */
    background: #fff;
    color: #4d4d4d;
    margin-top: 2rem;
  }
  .Sm {
    height: 8.1rem;
    line-height: 8.1rem;
    padding: 0 2rem;
    border-top: 1px solid #cccccc;
  }

  .Sleft {
    height: 10rem;
    line-height: 10rem;
    padding: 0 2rem;
    border-top: 1px solid #cccccc;
    display: flex;
    align-items: center;
  } 
  .Smaincon {
    /* margin-left: 6.7rem; */
    margin-right: 2rem;
  }
  
  .Smaincone {
    display: flex;
    flex-direction: column;
    justify-self: start;
    margin-right: 10.9rem;
  }
  .Smaintop {
    margin-bottom: 1rem;
  }
   .Smco {
    margin-top: 2rem;
    color: #e53e42;
  }
  .Smain1 {
    padding: 1.6rem 2rem;
    display: flex;
    font-size: 2.8rem;
    border-top: 1px solid #cccccc;
     flex-direction: row;
    justify-content: center;
  }
  .Smainbo {
      color: #666;
  }
  /* 查看更多 */
  .Stshang {
      width: 1.8rem;
      height: 1.8rem;
      border-left: 0.2rem solid #666;
      border-top: 0.2rem solid #666;
      display: inline-block;
      transform: rotate(45deg);
      margin-left: 2rem;
      margin-bottom: -0.3rem;
  }
  .Stxia {
      width: 1.8rem;
      height: 1.8rem;
      border-right: 0.2rem solid #666;
      border-bottom: 0.2rem solid #666;
      display: inline-block;
      transform: rotate(45deg);
      margin-left: 2rem;
      margin-bottom:0.6rem;
  }
  /* 结算 */
  .Smainco {
    text-align: left;
    font-size: 2.8rem;
    border-top: 1px solid #cccccc;
    /* border-bottom: 1px solid #ccc;  */
    background: #fff;
    color: #4d4d4d;
    margin-top: 1.8rem;
  }
  .Smainto {
    padding: 1.7rem 2rem;
    display: flex;
    justify-content: space-between;
    position: relative;
    font-size: 2.8rem;
    /* border-top: 1px solid #cccccc; */
    border-bottom: 1px solid #ccc;
  }
  /* 圆形按钮 */
  .Sma {
    height: 3rem;
    width: 3rem;
    vertical-align: middle;
    background: url(../../assets/user/g-gui.png) 0 0;
    margin-top: 0.5rem;
    color: #4d4d4d;
    position: absolute;
    right: 2rem;
  }
  .Sma1 {
    background: url(../../assets/user/g-gui.png) no-repeat -3.6rem 0;
    position: absolute;
  } 
  /* 确认支付 */
  .Scbut {
      color: #fff;
      background: #e53e42;
      width: 60rem;
      height: 6.6rem;
      margin-top: 14rem;
      border-radius: 5rem;
      font-size: 2.8rem;
  }

</style>